<template>
  <div class="wrapper">
    <!--头部-->
    <div class="duanhuohead">
      <div class="fiext">
      <div class="tou"></div>
      <div class="wei">
        <img src="../../assets/img/duanhuo/shouye/back.png" alt="">
        <span>这些都是“断货王”···</span>
        <img src="../../assets/img/duanhuo/shouye/share.png" alt="">
      </div>
      </div>
    </div>
    <!--中间-->
    <div class="zj">
    <div class="center" v-for="item in 3">
      <div class="bigimg">
        <img @click="godetails" src="../../assets/img/duanhuo/shouye/bigImg.png" alt="">
      </div>
      <div class="xiaotu">
        <img @click="godetails" src="../../assets/img/duanhuo/shouye/listImg1.png" alt="">
      <p>不易脱妆口红</p>
        <p>￥59</p>
        <span>还剩1000件</span>
        <span>马上去抢</span>
      </div>
      <div class="xiaotu">
        <img @click="godetails" src="../../assets/img/duanhuo/shouye/listImg2.png" alt="">
        <p>不易脱妆口红</p>
        <p>￥59</p>
        <span>还剩1000件</span>
        <span>马上去抢</span>
      </div>
      <div class="xiaotu">
        <img @click="godetails" src="../../assets/img/duanhuo/shouye/listImg3.png" alt="">
        <p>不易脱妆口红</p>
        <p>￥59</p>
        <span>还剩1000件</span>
        <span>马上去抢</span>
      </div>
    </div>
    </div>
     <div class="dibu"></div>
  <router-view></router-view>
    <ldhFoot></ldhFoot>
  </div>
</template>
<script>
  import ldhFoot from '../HyyFooter/footer.vue'
  export default {
    components:{
      ldhFoot
    },
    methods:{
      godetails(){
        this.$router.push({path:'/details'})
      }
    },
  }
</script>
<style scoped>
  .duanhuohead{
    margin-bottom: 4.5rem;
  }
  .duanhuohead .fiext{
    width: 100%;
    position: fixed;
    top: 0;
  }
  .duanhuohead .tou{
    height: 1rem;
    background: red;
  }
  .duanhuohead .wei{
    height: 2rem;
    background: red;
    display: flex;
    justify-content:space-between;
    align-items: center;
    font-size: 1rem;
    color: #fff;
  }
  .duanhuohead .wei img{
    height: 1rem;
    margin: 0 0.5rem;
  }
  .zj{
    background: #ccc;
  }
  .center{
    width: 100%;
    background: #fff;
    margin-bottom: 1rem;
  }
  .center:nth-last-of-type(1){
    margin-bottom: 0rem;
  }
  .center .bigimg img {
    width: 100%;
    /*margin-top: 1rem;*/
    background-color: #ffeaea;
    box-shadow: 0rem 0rem 0rem 0rem
    #cccccc;
  }
  .center .xiaotu{
    text-align: center;
    width: 30%;
    display: inline-block;
    border-right: 1px solid #ccc;
  }
  .center .xiaotu:nth-last-of-type(1){
    border-right: 0;
  }
  .center .xiaotu img{
    height: 3.6rem;
    font-size: 0rem;
  }
  .center .xiaotu p{
    font-size: 0.5rem;
  }
  .center .xiaotu p:nth-last-of-type(1){
    border-bottom:1px solid #ccc;
    width: 80%;
    margin: auto;
  }
  .center .xiaotu span{
    font-size: 0.4rem;
    display: block;

  }
  .center .xiaotu span:nth-last-of-type(1){
    border:1px solid #ccc;
    width: 60%;
    /*padding: 0.1rem;*/
    margin:0.1rem auto;
    background-color: #e53e42;
    border-radius: 1rem;
    color: #fff;
  }
  .dibu{
    background: #ccc;
    height: 1rem;
  }
</style>
